<!-- head -->
{include file='public/head' /}
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/item/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/item/index.css" />
<script type="text/javascript" src="__STATIC__/admin/item/swiper.min.js"></script>
<!-- head -->
<style>
    .details .conter .tiem {
        margin-top: 8px;
        padding-left: 20px;
        background-image: url(__STATIC__/admin/item/tiem@3x.png);
        background-repeat: no-repeat;
        background-size: 14px 14px;
        font-size: 14px;
        color: #999999;
        background-position:0px 3px;
    }
    .details .conter .tiem span {
        color: #333333;
    }
    .details .conter .person {
        margin-top: 8px;
        padding-left: 20px;
        background-image: url(__STATIC__/admin/item/touxiang@3x.png);
        background-repeat: no-repeat;
        background-size: 14px 14px;
        font-size: 14px;
        color: #999999;
        background-position:0px 3px;
    }
    .swiper-slide{
        position: relative;
    }
    .gou{
        position:absolute;
        width:60px;
        height:40px;         
        top:0;
        right: -10px;
        overflow:hidden;
        z-index:50;
        background-image:url(__STATIC__/admin/item/gou.png);
        background-repeat: no-repeat;
        background-size:60px 40px;
    }
    .file{
        margin-top: 30px;
    }
    .btnn{
        margin-top: 50px;
    }
    .aa{
        width: 150px;
        height: 150px;
    }
    .box-body input{
        border: none;
    }

    .comments { 
        width:100%;
        overflow:auto; 
        word-break:break-all; 
        border:none;
    } 
    .btn_submit {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #fe357b;
        color: #ffffff;
    }
</style>
<!-- left -->
{include file='public/left' /}
<!-- left -->

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            项目预览
            <small>项目详情</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 项目管理</a></li>
            <li>项目列表</li>
            <li class="active">预览</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-3">
                <!-- Box Comment -->
                <div class="box box-widget">
                    <div class="box-header with-border" style=" background-color: black;">
                        <div class="user-block" style=" color: white;">
                            4G <span class="fa fa-signal"></span>
                            <span style=" padding-left: 33%"><?php echo date('H:i:s',time())?></span>
                        </div>
                        <div class="user-block" style=" color: white; font-size: 18px;">
                            <span style=" padding-left: 39%">项目详情</span>
                        </div>

                        <!-- /.user-block -->
                        <div class="box-tools" >
                            <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="wifi"><i class="fa fa-wifi"></i></button>
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-battery-3"></i></button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                        <!-- /.box-tools -->
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                {volist name='data.itemimg' id='admin'}
                                <div class="swiper-slide">
                                    <img class="img-responsive pad" src="{:config('adminconfig.ImgPath')}/{$admin.img}" alt="item_img">
                                </div>
                                {/volist}
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>
                        </div>  
                        <form class="form-horizontal" method="post" action="{:url('admin/Item/saveItem','','')}" enctype="multipart/form-data">
                            <input type="hidden" name="item_id" value="{$data.id}">
                            <p style="margin-top: 15px;">
                                <span style="font-weight:bold; font-size: 16px;">
                                    <input type="text" name="item_name" value="{$data.item_name}">
                                </span>
                            </p>
                            <p>
                                <span style="font-size: 20px;color: #fe357b;">
                                    ￥<input type="text" name="item_price" value="{$data.item_price}">
                                </span>
                            </p>
                            <p>
                                <span style="font-size: 12px;  color: #999999;float: left;">
                                    疗程价￥<input type="text" name="item_prices" style="width:50px;"  value="{$data.item_prices}">/<input type="text" name="item_number"   style="width:25px;" value="{$data.item_number}">次
                                </span>
                                <span style="font-size: 12px;  color: #666666;float: right;">
                                    已售{$data.sell_count}
                                </span>
                            <div style=" clear: both;"></div>
                            </p>
                            <div class="evaluate">
                                <div class="evaluate_num">{$data.commentStar}.0分</div>
                                <div class="evaluate_img">
                                    {for start="0" end="$data.commentStar"}
                                    <img src="__STATIC__/admin/item/xing.png"/>
                                    {/for}                
                                </div>
                                <div class="evaluate_sum">{$data.commentCount}条评论</div>
                            </div>
                            <!--<div class="img">{$data.service_time}</div>-->
                            <!--<span class="pull-right text-muted"></span>-->
                            <div class="details">
                                <div class="conter">
                                    <div class="deatils_title">项目描述</div>
                                    <img class="img-responsive pad" src="{:config('adminconfig.ImgPath')}/{$data.itemcnt_img}" alt="item_img">
                                    <div class="details222">
                                        <textarea class="comments" id="textarea" name="content">{$data.content}</textarea>                             
                                    </div>
                                    <div class="tiem">
                                        服务时长：<span> 耗时 <input type="text" style="width:25px;" name="service_time" value="{$data.service_time}"> 分钟</span>
                                    </div>
                                    <div class="person">
                                        服务人群：<span> <input type="text" name="people" value="{$data.people}">   </span>
                                    </div>
                                </div>
                            </div>

                            <div class="btn_div">
                                <div>收藏</div>
                                <div>客服</div>
                                <div>立即抢购</div>
                                <div><input  class="btn_submit" type="submit" value="保存">  </div>
                            </div>
                        </form>
                    </div>

                    <!-- /.box-body -->

                    <!-- /.box-footer -->
                </div>
                <!-- /.box -->
            </div>
            <div class="col-md-2">
                <div>1.选择需要修改的图片</div>
                <form id='form' class="form-horizontal" method="post" action="{:url('admin/Item/saveItemImg','','')}" enctype="multipart/form-data">
                    <!--<div class="swiper-slide aa">
                            <img class="img-responsive img_item" tid='{$data.id}' ttype='0' src="{:config('adminconfig.ImgPath')}/{$data.item_img}" alt="item_img">
                        </div>-->
                    {volist key='aa' name='data.itemimg' id='admin'}
                    {if condition="$aa eq 1"}
                    <div class="swiper-slide aa">
                        <img class="img-responsive img_item" title='{$aa}' tid='{$admin.id}' ttype='0' src="{:config('adminconfig.ImgPath')}/{$admin.img}" alt="item_img">
                    </div>
                    {else/}
                    <div class="swiper-slide aa">
                        <img class="img-responsive img_item" title='{$aa}' tid='{$admin.id}' ttype='1' src="{:config('adminconfig.ImgPath')}/{$admin.img}" alt="item_img">
                    </div>
                    {/if}
                    {/volist}

            </div>
            <div class="col-md-2">
                <input type='hidden' name="id" class='id'>
                <input type='hidden' name='type' class="type">
                2.选择新的图片<input type="file" name='img' class="file">
                <input type='submit' class='btnn btn-block btn-primary'  value="上传">   
                <p style="padding-top: 30px; font-size: 16px;">使用说明：<br><br>1.选择需要修改的图片<br><br>2.选择新的图片<br><br>3.点击上传按钮</p>
            </div>         
            </form>
        </div>
    </section>
</div>
<script>
    $(function () {
        var wid = $(".swiper-container").width();
        $(".swiper-container").css('height', wid + 'px');
    })

    $(".img_item").click(function () {
        $(".gou").remove();
        var id = $(this).attr('tid');
        var type = $(this).attr('ttype');
        $(".id").val(id);
        $(".type").val(type);
        $(this).parent().append("<div class='gou'></div>")
    })

    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        autoplay: {
            delay: 2000, //2秒切换一次
        },
        //  如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    })
    $(".btn").click(function () {
        var flie = $(".file").val();
        if ($(".gou").length < 1) {
            alert('请选择图片');
            return false;
        }
        if (!flie) {
            alert('请上传图片');
            return false;
        }
        $("form").submit();
    })



    function makeExpandingArea(el) {
        var setStyle = function (el) {
            el.style.height = 'auto';
            el.style.height = el.scrollHeight + 'px';
            // console.log(el.scrollHeight);
        }
        var delayedResize = function (el) {
            window.setTimeout(function () {
                setStyle(el)
            },
                    0);
        }
        if (el.addEventListener) {
            el.addEventListener('input', function () {
                setStyle(el)
            }, false);
            setStyle(el)
        } else if (el.attachEvent) {
            el.attachEvent('onpropertychange', function () {
                setStyle(el)
            });
            setStyle(el)
        }
        if (window.VBArray && window.addEventListener) { //IE9
            el.attachEvent("onkeydown", function () {
                var key = window.event.keyCode;
                if (key == 8 || key == 46)
                    delayedResize(el);

            });
            el.attachEvent("oncut", function () {
                delayedResize(el);
            }); //处理粘贴
        }
    }
    makeExpandingArea(textarea);
</script>
<!-- foot -->
{include file='public/foot' /}
<!-- foot -->